<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';

// 数据定义
const dataValue = ref('2025')
const activeTab = ref('overview')
const showMenu = ref(false)
const menuHovered = ref(false)

// 财务统计数据
const financialStats = ref({
  totalIncome: 0.00,
  totalExpense: 0.00,
  totalProfit: 0.00,
  cycleBusiness: {
    income: 0.00,
    expense: 0.00,
    profit: 0.00,
    profitRate: '0.00%'
  },
  singleBusiness: {
    income: 0.00,
    expense: 0.00,
    profit: 0.00,
    profitRate: '0.00%'
  }
})

// 表格数据
const tableData = ref([
  {
    type: '业务类型1',
    year: { income: 0, expense: 0, profit: 0, refund: 0 },
    january: { income: 0, expense: 0, profit: 0, refund: 0 },
  }
])

// 图表引用
const mainChartRef = ref(null)
const pieChartRef = ref(null)

// 柱状图配置
const barOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['收入', '支出'],
    top: 10,
    right: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: { color: '#666', interval: 0 }
  },
  yAxis: {
    type: 'value',
    axisLabel: { color: '#666' },
    splitLine: {
      show: true,
      lineStyle: { type: 'dashed', color: '#eee' }
    }
  },
  series: [
    {
      name: '收入',
      type: 'bar',
      itemStyle: { color: '#5470c6' },
      data: [320, 332, 301, 334, 390, 330, 320, 200, 320, 500, 220, 200]
    },
    {
      name: '支出',
      type: 'bar',
      itemStyle: { color: '#91cc75' },
      data: [120, 132, 101, 134, 90, 230, 210, 200, 320, 500, 220, 200]
    }
  ]
}

// 饼图配置
const pieOption = {
  tooltip: { trigger: 'item' },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  series: [
    {
      name: '收入占比',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['40%', '50%'],
      data: [
        { value: 1048, name: '业务类型1' },
        { value: 735, name: '业务类型2' },
        { value: 580, name: '业务类型3' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

// 菜单控制
const handleMenuMouseEnter = () => {
  menuHovered.value = true
}

const handleMenuMouseLeave = () => {
  menuHovered.value = false
  setTimeout(() => {
    if (!menuHovered.value) {
      showMenu.value = false
    }
  }, 100)
}

const hideMenu = () => {
  setTimeout(() => {
    if (!menuHovered.value) {
      showMenu.value = false
    }
  }, 100)
}

// 初始化图表
onMounted(() => {
  nextTick(() => {
    if (mainChartRef.value) {
      const barChart = echarts.init(mainChartRef.value)
      barChart.setOption(barOption)
    }
    if (pieChartRef.value) {
      const pieChart = echarts.init(pieChartRef.value)
      pieChart.setOption(pieOption)
    }
    
    window.addEventListener('resize', () => {
      if (mainChartRef.value) echarts.getInstanceByDom(mainChartRef.value)?.resize()
      if (pieChartRef.value) echarts.getInstanceByDom(pieChartRef.value)?.resize()
    })
  })
})
</script>

<template>
  <div class="financial-system">
    <!-- 顶部筛选区域 -->
    <div class="header-section">
      <div class="header-content">
        <el-date-picker 
          v-model="dataValue" 
          type="year" 
          placeholder="选择年份"
          class="year-picker"
        />
        <div class="filter-container">
          <div 
            class="filter-btn" 
            @mouseenter="showMenu = true" 
            @mouseleave="hideMenu"
          >
            筛选 ☰
            <div 
              v-if="showMenu" 
              class="filter-menu"
              @mouseenter="handleMenuMouseEnter"
              @mouseleave="handleMenuMouseLeave"
            >
              <div class="filter-item">
                <label>收付款账户</label>
                <input type="text" placeholder="搜索账户">
              </div>
              <div class="filter-item">
                <label>服务类型</label>
                <input type="text" placeholder="搜索类型">
              </div>
              <div class="filter-item">
                <label>服务产品</label>
                <input type="text" placeholder="搜索产品">
              </div>
              <div class="filter-actions">
                <button class="btn-reset">重置</button>
                <button class="btn-confirm">确认</button>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="report-link">报表逻辑说明</a>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 顶部统计卡片 -->
      <div class="stats-section">
        <div class="stat-card">
          <div class="stat-value">{{ financialStats.totalIncome }}元</div>
          <div class="stat-label">总收入</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ financialStats.totalExpense }}元</div>
          <div class="stat-label">总支出</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ financialStats.totalProfit }}元</div>
          <div class="stat-label">总毛利</div>
        </div>
      </div>

      <!-- 中间图表区域 -->
      <div class="chart-section">
        <div class="main-chart">
          <div class="chart-header">
            <h3>2025年整体收支情况</h3>
            <span class="chart-unit">单位：万元</span>
          </div>
          <div ref="mainChartRef" class="chart-container"></div>
        </div>
        
        <div class="side-panels">
          <!-- 周期业务面板 -->
          <div class="business-panel">
            <h4>周期业务</h4>
            <div class="business-stats">
              <div class="stat-row">
                <span class="value">{{ financialStats.cycleBusiness.income }}元</span>
                <span class="label">收入</span>
              </div>
              <div class="stat-row">
                <span class="value">{{ financialStats.cycleBusiness.expense }}元</span>
                <span class="label">支出</span>
              </div>
              <div class="stat-row">
                <span class="value">{{ financialStats.cycleBusiness.profit }}元</span>
                <span class="label">毛利</span>
              </div>
              <div class="stat-row">
                <span class="value">{{ financialStats.cycleBusiness.profitRate }}</span>
                <span class="label">毛利占比</span>
              </div>
            </div>
          </div>
          
          <!-- 单次业务面板 -->
          <div class="business-panel">
            <h4>单次业务</h4>
            <div class="business-stats">
              <div class="stat-row">
                <span class="value">{{ financialStats.singleBusiness.income }}元</span>
                <span class="label">收入</span>
              </div>
              <div class="stat-row">
                <span class="value">{{ financialStats.singleBusiness.expense }}元</span>
                <span class="label">支出</span>
              </div>
              <div class="stat-row">
                <span class="value">{{ financialStats.singleBusiness.profit }}元</span>
                <span class="label">毛利</span>
              </div>
              <div class="stat-row">
                <span class="value">{{ financialStats.singleBusiness.profitRate }}</span>
                <span class="label">毛利占比</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部标签页区域 -->
      <div class="tab-section">
        <el-tabs v-model="activeTab" class="financial-tabs">
          <!-- 整体收支情况标签 -->
          <el-tab-pane label="整体收支情况" name="overview">
            <div class="tab-content">
              <div class="tab-chart">
                <div class="chart-title">各业务年累计收入占比</div>
                <div ref="pieChartRef" class="pie-chart"></div>
              </div>
              <div class="tab-table">
                <el-table :data="tableData" border class="financial-table">
                  <el-table-column width="30" />
                  <el-table-column prop="type" label="业务类型" width="120" />
                  
                  <el-table-column label="全年收支">
                    <el-table-column prop="year.income" label="收入" width="100" />
                    <el-table-column prop="year.expense" label="支出" width="100" />
                    <el-table-column prop="year.profit" label="毛利" width="100" />
                    <el-table-column prop="year.refund" label="退款" width="100" />
                  </el-table-column>
                  
                  <el-table-column label="1月收支">
                    <el-table-column prop="january.income" label="收入" width="100" />
                    <el-table-column prop="january.expense" label="支出" width="100" />
                    <el-table-column prop="january.profit" label="毛利" width="100" />
                    <el-table-column prop="january.refund" label="退款" width="100" />
                  </el-table-column>
                  
                  <el-table-column prop="type" label="收入" width="120" />
                </el-table>
              </div>
            </div>
          </el-tab-pane>

          <!-- 其他标签页（简化显示） -->
          <el-tab-pane label="收付款账户" name="account">
            <div class="tab-content">
              <div class="tab-placeholder">收付款账户内容区域</div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="服务类型" name="serviceType">
            <div class="tab-content">
              <div class="tab-placeholder">服务类型内容区域</div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="服务产品" name="serviceProduct">
            <div class="tab-content">
              <div class="tab-placeholder">服务产品内容区域</div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="按服务项统计" name="serviceItem">
            <div class="tab-content">
              <div class="tab-placeholder">按服务项统计内容区域</div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="签单人" name="signatory">
            <div class="tab-content">
              <div class="tab-placeholder">签单人内容区域</div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="客户所属部门" name="customerDept">
            <div class="tab-content">
              <div class="tab-placeholder">客户所属部门内容区域</div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="收费登记人" name="registrant">
            <div class="tab-content">
              <div class="tab-placeholder">收费登记人内容区域</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.financial-system {
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 16px;
}

.header-section {
  background: white;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  
  .header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    
    .year-picker {
      width: 120px;
    }
    
    .filter-container {
      position: relative;
      
      .filter-btn {
        padding: 8px 16px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s;
        
        &:hover {
          border-color: #409eff;
          color: #409eff;
        }
      }
      
      .filter-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        padding: 16px;
        min-width: 200px;
        z-index: 1000;
        margin-top: 4px;
        
        .filter-item {
          margin-bottom: 12px;
          
          label {
            display: block;
            font-size: 12px;
            color: #606266;
            margin-bottom: 4px;
          }
          
          input {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 12px;
          }
        }
        
        .filter-actions {
          display: flex;
          gap: 8px;
          justify-content: flex-end;
          margin-top: 12px;
          
          button {
            padding: 6px 12px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
          }
          
          .btn-reset {
            background: white;
            color: #606266;
            
            &:hover {
              border-color: #409eff;
              color: #409eff;
            }
          }
          
          .btn-confirm {
            background: #409eff;
            color: white;
            border-color: #409eff;
            
            &:hover {
              background: #66b1ff;
              border-color: #66b1ff;
            }
          }
        }
      }
    }
    
    .report-link {
      margin-left: auto;
      color: #1890ff;
      text-decoration: none;
      font-size: 14px;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.main-content {
  background: white;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  
  .stat-card {
    background: #fafafa;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e8e8e8;
    
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: #ff9c00;
      margin-bottom: 8px;
    }
    
    .stat-label {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }
}

.chart-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.main-chart {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px;
  
  .chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    
    h3 {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
    }
    
    .chart-unit {
      font-size: 12px;
      color: #999;
    }
  }
  
  .chart-container {
    height: 250px;
  }
}

.side-panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.business-panel {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px;
  
  h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    text-align: center;
  }
  
  .business-stats {
    .stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .value {
        font-size: 14px;
        font-weight: 500;
        color: #333;
      }
      
      .label {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.tab-section {
  .financial-tabs {
    :deep(.el-tabs__header) {
      margin: 0;
    }
    
    :deep(.el-tabs__content) {
      padding: 16px 0;
    }
  }
  
  .tab-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    
    .tab-chart {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      padding: 16px;
      
      .chart-title {
        font-size: 14px;
        color: #333;
        font-weight: 600;
        text-align: center;
        margin-bottom: 16px;
      }
      
      .pie-chart {
        height: 200px;
      }
    }
    
    .tab-table {
      .financial-table {
        :deep(.el-table__header) {
          th {
            background: #fafafa;
            color: #333;
            font-weight: 600;
          }
        }
      }
    }
    
    .tab-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      color: #999;
      font-size: 14px;
      border: 1px dashed #e8e8e8;
      border-radius: 4px;
    }
  }
}

:deep(.el-date-editor) {
  .el-input__inner {
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
  }
}

:deep(.el-select) {
  .el-input__inner {
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
  }
}

@media (max-width: 768px) {
  .stats-section {
    grid-template-columns: 1fr;
  }
  
  .chart-section {
    grid-template-columns: 1fr;
  }
  
  .tab-content {
    grid-template-columns: 1fr !important;
  }
}
</style>